<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>recall召回服务</title>
<link rel="stylesheet" href="{{ url_for('static', filename='layui/css/layui.css') }}">
<script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header"></div>
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane" action="/recallServer" method="get">
                <div class="layui-form-item">
                    <label class="layui-form-label">时间戳</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <input type="text" id="timestamp" readonly  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">响应时间</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" value={{costTime}} readonly placeholder="0" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>     
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户ID</label>
                        <div class="layui-input-inline" style="width: 200px;">
                            {% if uid==0 %} 
                                <input type="text" id="input1" name="ToSearchUid" required lay-verify="required" placeholder="请输入用户id(1-1373351)" autocomplete="off" class="layui-input">
                            {% else %}
                                <input type="text" id="input1" value={{uid}}  name="ToSearchUid" required lay-verify="required" placeholder="请输入用户id(1-1373351)" autocomplete="off" class="layui-input">
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" id="ok" lay-filter="formDemo" class="layui-btn layui-btn-radius layui-btn-normal"><i class="layui-icon layui-icon-search">&nbsp;&nbsp;</i><cite>提交</cite></button>
                        <button type="button" onclick="setnull()" class="layui-btn layui-btn-primary layui-border-red">重新输入</button>
                    </div>
                </div>
            </form>   
        </div>
    </div> 
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	</fieldset>
    <div class="layui-card">
        <div class="layui-card-header" style="font-size: 18px;">候选集商品ID表</div>
        <div class="layui-card-body">
            <table class="layui-hide" id="Info"></table>
        </div>
    </div>        
    <div class="layui-card">
        <div class="layui-card-header" style="font-size: 18px;">源信息</div>
        <div class="layui-card-body">
            <fieldset class="layui-elem-field layui-field-title">
                <span class="layui-badge layui-bg-blue">recallService</span>
                {% if originData==0 %}
                    <div class="layui-field-box">
                        这里展示的是服务器端传来的原始数据
                    </div>
                {% else %}
                    <div class="layui-field-box">
                        {{originData}}
                    </div>
                {% endif %}
            </fieldset>
        </div>
    </div>        
    <input type="text" id="code" value={{stateCode}} hidden>
</body>
</html>
<script src="{{ url_for('static', filename = 'layui/layui.js') }}" charset="utf-8"></script>
<script type="text/javascript">
layui.use(['layer','table'], function(){
    var table = layui.table;
    //直接在js中获取flask后台传过来的值，不建议这样做有js注入风险
    var tablevalue={{result|tojson}};
    //展示已知数据
    table.render({
        elem: '#Info'
        ,title:'候选集商品ID列表'
        ,cols: [[ //标题栏
            {field: 'nid', title: '商品ID', align: 'center'}
            ,{field: 'score', title: '向量欧式距离(相似度得分)',sort:true, align: 'center'}
        ]]
        ,toolbar:true
        ,data: tablevalue
        ,even: true
        ,page: true //是否显示分页
        ,limit: 10 //每页默认显示的数量
    });
    function changetablesize(){
        var width=$(window).width();
        if(width<500){
            table.resize('Info');
        }else{
            table.resize('Info');
        }
    }
    var layer = layui.layer;
    $("#ok").on("click",function(){
        var index = layer.load(1, {shade: false});
    })
    $(document).ready(function(){
        //通过状态码提示用户是否查询成功
        var code=$("#code").val()
        if(code==200){
            layer.msg('召回成功!', {icon: 1,time:1500});
            changetablesize();
        }
        if(code==500){
            layer.msg('召回失败,请更换id后尝试!', {icon: 2,time:1500});
            changetablesize();
        }
    });
    //监听窗口大小变化，动态改变表格大小
    window.onresize=changetablesize;
}); 
//时间戳时间设置
layui.use('util',function(){
    var util = layui.util
    var dateString = util.toDateString(new Date(), "yyyy-MM-dd HH:mm:ss"); //执行转换日期格式的方法
    $('#timestamp').val(dateString);
})
layui.use('form', function(){
    var form = layui.form;
  //监听提交
    form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        return false;
    });
});
//重新输入按钮的功能
function setnull(){
    $("#input1").val('');
};
</script>

